<template>
  <div
    :id="widget.key"
    :data-type="widget.type"
    style="position: relative;"
  >
    <sg-row
      :key="widget.key"
      type="flex"
      :gutter="widget.options.gutter ? widget.options.gutter : 0"
      :main-start="justify('start', widget.options.justify)"
      :main-center="justify('center', widget.options.justify)"
      :main-end="justify('end', widget.options.justify)"
      :main-between="justify('between', widget.options.justify)"
      :main-around="justify('around', widget.options.justify)"
      :cross-start="align('start', widget.options.align)"
      :cross-center="align('center', widget.options.align)"
      :cross-end="align('end', widget.options.align)"
    >
      <sg-col
				class="grid-widget-col"
				style="overflow:auto"
				v-for="(col, colIndex) in widget.columns"
				:key="colIndex"
				:column="col.span"
				v-show="isShowColumn(col)"
			>
        <template v-for="citem in col.list" >
          <render-form-item
						:controls="controls"
						:cardKey="cardKey"
						:workflowData="workflowData"
						:key="citem.key"
						:rules="rules"
						:widget="citem"
						:values="values"
						:validateInfo="validateInfo"
						:generateFormOnlyKey="generateFormOnlyKey"
						v-on="$listeners"
					/>
        </template>
      </sg-col>
    </sg-row>
  </div>
</template>

<script>
import { isNil } from 'lodash-es'

import ContainerMixin from '../mixins/container'

export default {
  name: 'RenderGrid',
  mixins: [ContainerMixin],
  data() {
    return {}
  },
  computed: {
    // 是否显示列
    isShowColumn () {
      return (col) => {
        return isNil(col.activeStep) || col.activeStep === true
      }
    }
  },
  methods: {
    justify (dir, value) {
      const dirMap = {
        start: 'start',
        center: 'center',
        end: 'end',
        between: 'space-between',
        around: 'space-around'
      }
      return dirMap[dir] === value
    },
    align (dir, value) {
      const dirMap = {
        start: 'top',
        center: 'middle',
        end: 'bottom'
      }
      return dirMap[dir] === value
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-widget-col {
  &:first-of-type {
    padding-left: 0 !important;
  }
  &:last-of-type {
    padding-right: 0 !important;
  }
}
</style>
